<template>
  <div class="content" id="SortingManagement" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>清分管理-</a-breadcrumb-item>
        <a-breadcrumb-item>清分列表</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item" style="justify-content: flex-start">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 50px;
            "
          >
            <template>
              <a-input-search
                placeholder="业主名称"
                style="width: 200px"
                v-model="landlordName"
              />
            </template>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 50px;
            "
          >
            <template>
              <a-input-search
                placeholder="业主编号"
                style="width: 200px"
                v-model="landlordId"
              />
            </template>
          </div>
          <div style="display: flex; align-items: center">
            <template>
              <a-select
                showSearch
                placeholder="结算状态"
                optionFilterProp="children"
                style="width: 200px"
                allowClear
                v-model="searchType"
                @select="selectPark"
                @change="selectParkChange"
              >
                <a-select-option
                  v-for="p in typeOption"
                  :key="p.value"
                  :value="p.value"
                  >{{ p.label }}
                </a-select-option>
              </a-select>
            </template>
          </div>
          <div class="box-condition-item" style="padding-top: 20px">
            <template>
              <div style="margin: auto 50px">
                <a-range-picker
                  id="range-picker"
                  :showTime="{
                    format: 'HH:mm:ss',
                  }"
                  format="YYYY-MM-DD HH:mm"
                  :placeholder="['开始时间', '结束时间']"
                  @ok="onOk"
                  @change="onChange"
                  :value="rangePickerValue()"
                />
              </div>
            </template>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 50px;
            "
          >
            <template>
              <a-button icon="search" type="primary" style="margin: 0 0 0 20px" @click="queryData"
                >查询</a-button
              >
              <a-button icon="sync" style="margin: 0 0 0 20px" @click="reset"
                >重置</a-button
              >
            </template>
          </div>
        </div>
      </div>
    </div>

    <!--表单-->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div class="box-title">
          当前显示:
          <span>{{
            momentArr.length
              ? momentArr[0].format("YYYY-MM-DD") +
                "-" +
                momentArr[1].format("YYYY-MM-DD")
              : "所有时间"
          }}</span>
          共计<span>{{ pagination.total }} </span>条信息 合计<span
            >{{ moneySum }} </span
          >(元)
        </div>
        <!-- <div style="display: flex">
          <a-button @click="addTap()">添加优惠券</a-button>
        </div> -->
      </div>

      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          bordered
          size="small"
          :rowClassName="setRowClassName"
          @change="tableChange"
          :rowKey="(record) => record.id"
        >
          <template slot="type" slot-scope="text">
            <template v-if="text == 0"> 未结算 </template>
            <template v-else-if="text == 1"> 结算中 </template>
            <template v-else-if="text == 2"> 已结算 </template>
          </template>
          <template slot="operasyon" slot-scope="row">
            <a-button @click="detaylar(row)">详情</a-button>
          </template>
        </a-table>
      </div>
    </div>

    <!--详情-->
    <a-modal
      title="详情"
      v-model="showDetaylar"
      :width="400"
      @ok="showDetaylar = false"
      @cancel="showDetaylar = false"
    >
      <a-table
        bordered
        size="small"
        :dataSource="dataDetaylar"
        :columns="detaylarColumns"
        :rowClassName="setRowClassName"
        :pagination="paginationDetaylar"
      >
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import apiClarify from "../../api/sorting/clarify";
// 标题行
const columns = [
  {
    title: "清分id",
    dataIndex: "id",
  },
  {
    title: "清分时间",
    dataIndex: "clarifyTime",
  },
  {
    title: "业主名称",
    dataIndex: "landlordName",
  },
  {
    title: "业主id",
    dataIndex: "landlordId",
  },
  {
    title: "原始分润金额(元)",
    dataIndex: "paidInMoney",
  },
  {
    title: "清分金额(元)",
    dataIndex: "dueMoney",
  },
  {
    title: "结算状态",
    dataIndex: "settlementStatus",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operasyon" },
  },
];

const detaylarColumns = [
  {
    title: "清分时间",
    dataIndex: "clarifyTime",
  },
  {
    title: "业主名称",
    dataIndex: "landlordName",
  },
  {
    title: "业主编号",
    dataIndex: "landlordId",
  },
  {
    title: "钱包记录id",
    dataIndex: "walletRecordId",
  },
  {
    title: "交易订单号",
    dataIndex: "transactionOrderNo",
  },
  {
    title: "钱包实收金额(元)",
    dataIndex: "realityMoney",
  },
  {
    title: "钱包优惠金额(元)",
    dataIndex: "favorableAmount",
  },
];

const dataSource = [];

const queryCondition = {
  limit: "10",
  curr: "1",
  landlordName: "",
  landlordId: "",
  settlementStatus: "0",
  clarifyTimeStart: "",
  clarifyTimeEnd: "",
};

export default {
  name: "SortingManagement",
  data() {
    return {
      /**表格**/
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 100,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",
      /**下拉框**/
      allowClear: true,
      /**文本框**/
      typeOption: [
        { value: 0, label: "未结算" },
        { value: 1, label: "结算中" },
        { value: 2, label: "已结算" },
      ],
      /*收费时间日期*/
      momentArr: [],

      //业主名称 id
      landlordName: "",
      landlordId: "",
      settlementStatus: "",
      searchType: undefined,
      queryCondition,

      showDetaylar: false,
      dataDetaylar: [],
      detaylarColumns: detaylarColumns,
      /*分页插件*/
      paginationDetaylar: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 100,
      },
      moneySum:0,
      loading:false
    };
  },

  methods: {
    /**组件部分相关方法**/
    tableChange(page) {
      this.queryCondition.curr = page.current;
      this.queryData();
      this.queryCondition.curr = 0;
    },
    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },

    /* ---------------------- 条件筛选 ---------------------- */
    onChange(dates) {
      this.momentArr = dates;
    },
    onOk(value) {
      this.momentArr = value;
      this.queryData();
    },

    rangePickerValue() {
      return this.momentArr;
    },

    selectPark(value) {
      this.searchType = value;
      this.queryData();
    },
    selectParkChange(value) {
      if (value == undefined || value == "") {
        this.searchType = "";
        this.queryCondition.curr = 1;
        this.queryData();
      }
    },
    reset() {
      this.queryCondition = {
        limit: "10",
        curr: "1",
      };
      this.landlordName = "";
      this.landlordId = "";
      this.searchType = undefined;
      this.momentArr = [];

      this.queryData();
    },

    /** 操作相关(crud) **/
    queryData() {
      this.loading = true;
      let items = {
        landlordName: this.landlordName,
        landlordId: this.landlordId,
        settlementStatus: this.searchType,
        clarifyTimeStart:
          this.momentArr.length != 0
            ? this.momentArr[0].format("YYYY-MM-DD HH:mm:ss")
            : "",
        clarifyTimeEnd:
          this.momentArr.length != 0
            ? this.momentArr[1].format("YYYY-MM-DD HH:mm:ss")
            : "",
      };
      let params = Object.assign({}, this.queryCondition, items);
      apiClarify
        .postListClarify(params)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });

      this.totalMoney(params);
    },
    totalMoney(items) {
      apiClarify
        .sumClarifyAmount(items)
        .then((data) => {
          this.moneySum  = data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    detaylar(row) {
      this.showDetaylar = true;
      apiClarify
        .postFindClarifyDetail({ id: row.id, landlordName: row.landlordName })
        .then((data) => {
          this.dataDetaylar = data.data.list;
          this.paginationDetaylar.total = data.total;
          this.paginationDetaylar.current = data.pageNum;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // info() {
    //   const h = this.$createElement;
    //   this.$info({
    //     title: "This is a notification message",
    //     content: h("div", {}, [
    //       h("p", "some messages...some messages..."),
    //       h("p", "some messages...some messages..."),
    //     ]),
    //     onOk() {},
    //   });
    // },
  },
  /*页面初始化渲染后执行*/
  mounted() {
    this.queryData();
  },
};
</script>
<style lang="less" scoped>
.ant-table td {
  white-space: nowrap;
}

.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-body {
  padding-left: 40px;
  padding-right: 40px;
  background: #fff;
}

.box-condition-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-form .box-table {
  margin-top: 12px;
}

.box-tool button {
  margin: 0 0 0 10px;
}

/*轮播*/
.modalBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.modalBox .playImg {
  position: relative;
  width: 60%;
}

.modalBox .fromBox {
  width: 35%;
}

.modalBox .fromBox input {
  margin-bottom: 15px;
}

.modalBox .playImg ul.imgList {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.modalBox .playImg .img {
  width: 100%;
  height: 200px;
}

.modalBox .playImg .img img {
  display: block;
  width: 100%;
  height: 100%;
}

.modalBox .playImg .pointBox {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.modalBox .playImg .pointBox ul {
  display: flex;
  justify-content: center;
}

.modalBox .playImg .pointBox li.point {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  margin: 0 10px;
  background: #000;
}

.modalBox .playImg .pointBox li.active {
  background: #ff7255;
}

.array {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  opacity: 1;
  position: absolute;
  font-size: 30px;
}

.array .left,
.array .right {
  color: #fafafa;
  cursor: pointer;
}

/*.array .right{color:#999;cursor:pointer}*/
.array .left:hover {
  color: #333;
}

.array .right:hover {
  color: #333;
}

/* box-correction-popup */
.box-correction-popup {
  padding: 20px;
  height: 555px;
  /* flex */
  display: flex;
  align-items: center;
}

.box-correction-popup .box-image {
  padding: 0 15px;
  width: 888px;
  height: 500px;
}

.box-correction-popup .box-image .icon-image {
  width: 100%;
  height: 100%;
}

.box-correction-popup .box-correct {
  margin: 0 15px;
  width: 310px;
  height: 500px;
}

.box-correction-popup .box-correct .item-correct {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.box-correction-popup .box-correct .item-correct .text-correct {
  font-weight: 300;
  font-size: 14px;
  width: 100px;
}

.box-correction-popup .box-correct .item-correct .text-value {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.428571429;
  color: #020202;
}

/* box-dispatch-item */
.box-dispatch-item {
  display: flex;
  align-items: center;
}

.box-dispatch-item .text-key {
  width: 200px;
  /* text */
  font-size: 14px;
  font-weight: 300;
  color: #797979;
}

.box-dispatch-item .text-value {
  width: 265px;
}

.box-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.box-title span {
  display: inline-block;
  background: cornflowerblue;
  border-radius: 5px;
  padding: 10px 25px;
  color: #fff;
  font-size: 14px;
  margin: 2% 4%;
  cursor: pointer;
}

#SortingManagement {
  /deep/.ant-table-body {
    margin: 0%;
  }
}
</style>
